<template>
    <div>
        <el-dialog :visible.sync="visible" :before-close="closeDialog" width="1000px">
            <div class="form-group">
                <span class="form-label">反馈截止时间:</span>
                <el-date-picker v-model="feedbackTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                value-format=" yyyy-MM-dd"
                                format="yyyy-MM-dd"
                                :picker-options="expireTimeOption">
                </el-date-picker>
                <el-button type="primary"
                           icon="el-icon-plus"
                           size="small"
                           @click="addConsultDept()"
                           style="float: right;">添加会商部门
                </el-button>
            </div>
            <div class="consult-group">
                <div class="consult-card" v-for="(item,index) in deptList" :key="index">
                    <div class="consult-card-title">
                        <img :src="`${publicPath}img/error.png`" class="consult-img" @click.stop="removeCard(item.orgCode)">
                        <b>会商部门</b>&nbsp;:&nbsp;&nbsp;&nbsp;{{item.orgName}}
                    </div>
                    <div class="consult-card-content-group">
                        <div class="consult-card-content-lt">&nbsp;&nbsp;会商内容:</div>
                        <div class="consult-card-content-rt">
                            <el-input
                                    type="textarea"
                                    :rows="8"
                                    v-model="item.content">
                            </el-input>
                        </div>
                    </div>
                </div>
            </div>
          <dept-check-not-dialog :visible.sync="deptVisible"
                                 first-type="2"
                                 mini-type="2"
                                 @getCheckInfo="getCheckInfo"
                                 @cancel="cancelSupportDept"></dept-check-not-dialog>
          <div class="consult-button" style="text-align: center;">
                <el-button type="primary" size="small" :loading="btnLoading" @click.stop="startDiscussion()">发起会商</el-button>
                <el-button type="info" size="small" :loading="btnLoading" @click.stop="closeDialog()">关闭</el-button>
          </div>
        </el-dialog>
        <!--<dept-check :visible.sync="deptVisible" first-type="2" mini-type="2" @getCheckInfo="getCheckInfo" @cancel="cancelSupportDept"></dept-check>-->
    </div>
</template>
<script>
    import {projectStartDiscussion} from "@/api/planning/project";

    export default {
        name: "addTopicForm",
        data() {
            return {
                multiplefiles: [],
                publicPath: process.env.BASE_URL,
                feedbackTime: '',
                textarea: '',
                checkedKeys: [],//默认选中的节点
                cachePitchOnValues: [],
                deptVisible: false,
                deptList: [],
                expireTimeOption: {
                    disabledDate(date) { //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
                        return date.getTime() <= Date.now();
                    }
                },
                btnLoading: false
            };
        },
        props:{
            visible:{
                type: Boolean,
                required: true
            },
            taskId:{
                type: String,
                required: true
            }
        },
        created() {
        },
        methods: {
            // 添加会商部门
            addConsultDept() {
                this.deptVisible = true;
                this.cachePitchOnValues = [].concat(this.checkedKeys);
                this.deptList = [];
            },
            cancelSupportDept(deptIds, deptNames) {
                this.deptVisible = false;
            },
            getCheckInfo(deptIds, deptNames) {
                let deptIdArray = deptIds.split(",");
                let deptNameArray = deptNames.split(",");
                for (let index in deptIdArray) {
                    let item = {"orgCode": parseInt(deptIdArray[index]), "orgName": deptNameArray[index]};
                    if (this.deptList.findIndex(item => item.orgCode === deptIdArray[index]) == -1) {
                        this.deptList.push(item)
                    }
                }
                this.deptVisible = false;
            },
            // 移除会商部门
            removeCard(orgCode) {
                this.deptList.splice(this.deptList.findIndex(item => item.orgCode === orgCode), 1)
            },
            // 发起会商
            startDiscussion() {
                if (!this.feedbackTime) {
                    this.$message({
                        message: '请先填写反馈截止时间',
                        type: 'warning'
                    });
                    return;
                }
                if (this.deptList.length <= 0) {
                    this.$message({
                        message: '请选择会商部门',
                        type: 'warning'
                    });
                    return;
                }
                if (this.deptList.filter(item => (!item.content || item.content == '')).length > 0) {
                    this.$message({
                        message: '您有会商内容暂未填写！',
                        type: 'warning'
                    });
                    return;
                }
                this.$confirm("确定发起会商?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.startDis();
                });
            },
            startDis() {
                let startDiscussion = {
                    endDate: this.feedbackTime,
                };
                let imTopicDTOs = [];
                for (let i in this.deptList) {
                    let topicMap = {
                        description: this.deptList[i].content,
                        deptIds: [this.deptList[i].orgCode]
                    };
                    imTopicDTOs.push(topicMap)
                }
                startDiscussion.imTopicDTOs = imTopicDTOs;
                this.btnLoading = true;
                projectStartDiscussion(this.taskId, startDiscussion).then(response => {
                    if (response.data.code == 0) {
                        this.$notify({
                            title: "成功",
                            message: "发起会商成功",
                            type: "success",
                            duration: 2000
                        });
                        this.closeDialog();
                        this.afterAdd();
                    }
                }).finally(() => {
                    this.btnLoading = false;
                });
            },
            closeDialog(done){
                this.$emit('update:visible', false);
            },
            afterAdd(){
                this.$emit('afterAdd')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .consult-group {
        display: flex;
        flex-flow: row wrap;
        width: 100%;
    }

    .consult-card {
        margin-left: 18px;
        margin-top: 30px;
        border: 1px solid #dedbdb;
        flex: 0 0 31%;
    }

    .consult-card-title {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        background-color: #339cdb;
        padding: 10px 10px;
        color: #fff;
    }

    .consult-img {
        width: 25px;
        height: 25px;
        position: relative;
        float: right;
        top: -21px;
        right: -21px;
    }

    .consult-card-content-group {
        width: 100%;
        display: flex;
    }

    .consult-card-content-lt {
        font-weight: 600;
        margin: auto;
        flex: 1;
    }

    .consult-card-content-rt {
        padding: 5px;
        border-left: 1px solid #dedbdb;
        flex: 1.5;
    }

    .consult-card-radio {
        padding: 10px 0;
        border-top: 1px solid #dedbdb;
    }

    .consult-card-radio-rt {
        display: inline-block;
        margin-left: 10px;
    }

    .consult-button {
        margin: 2rem 2rem;
        text-align: right;
    }

    .form-group {
        padding: 20px 20px 20px 0px;
    }

    .form-label {
        font-weight: 600;
        margin-right: 2rem;
    }
</style>
